<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>画板</title>

    <link rel="stylesheet" type="text/css" href="src/bootstrap-3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>

    <script src="src/jquery-2.2.1.min.js" type="text/javascript"></script>
    <script src="src/bootstrap-3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="src/echarts.min.js"></script>
    <script src="src/jquery.knob.js"></script>
    <script src="js/app.js" type="text/javascript"></script>
    <script src="js/service.js" type="text/javascript"></script>
    <script src="js/mergeCanvas.js" type="text/javascript"></script>

</head>
<body  ng-app="board">
<header  class="center-block">
    <h3>HTML5 Canvas画板</h3>
</header>
<div class="main" ng-controller="mainCtrl">
    <div class="data_tab">
        <div class="col-md-2">&nbsp;</div>
        <div class="col-md-8" >
            <form class="form-inline" ng-if="sign==''||sign=='brush'">
                <div class="form-group">
                    <label class="left">线宽: &nbsp;</label>
                    <div class="left"><input type="range" id="line_width" min="1" max="10" step="1" ng-model="$parent.line_width"/></div>
                    <div class="left"><label>{{line_width}}</label></div>
                </div>

                <div class="form-group data_unit">
                    <label class="left">颜色: &nbsp;</label>
                    <div class="left"><input type="color" ng-model="$parent.color"/></div>
                </div>

                <div class="btn-group data_unit" data-toggle="buttons" ng-model="is_solid">
                    <label ng-click="solidEvent(1)" ng-class="{true: 'btn btn-primary active', false: 'btn btn-primary'}[is_solid]">
                        <input type="radio" name="options" id="option1" autocomplete="off" checked> 实
                    </label>
                    <label ng-click="solidEvent(0)" ng-class="{true: 'btn btn-primary', false: 'btn btn-primary active'}[is_solid]">
                        <input type="radio" name="options" id="option2" autocomplete="off"> 虚
                    </label>
                </div>
            </form>
            <form class="form-inline" ng-if="sign=='rectangular'||sign=='circle'">
                <div class="form-group data_unit" ng-show="sign=='rectangular'">
                    <label class="left">水平缩放: &nbsp;</label>
                    <div class="left"><input type="range" id="horizontal_zoom" min="0.1" max="2" step="0.1" ng-change="rectChange('horizontal_zoom')" ng-model="$parent.horizontal_zoom"/></div>
                    <div class="left"><label> {{horizontal_zoom}}倍</label></div>
                </div>
                <div class="form-group data_unit" ng-show="sign=='rectangular'">
                    <label class="left">垂直缩放: &nbsp;</label>
                    <div class="left"><input type="range" id="vertical_zoom" min="0.1" max="2" step="0.1" ng-change="rectChange('vertical_zoom')" ng-model="$parent.vertical_zoom"/></div>
                    <div class="left"><label> {{vertical_zoom}}倍</label></div>
                </div>
                <div class="form-group data_unit" ng-show="sign=='circle'">
                    <label class="left">缩放: &nbsp;</label>
                    <div class="left"><input type="range" min="0.1" max="2" step="0.1" ng-change="rectChange('circle')" ng-model="$parent.circle_zoom"/></div>
                    <div class="left"><label> {{circle_zoom}}px</label></div>
                </div>
                <div class="form-group data_unit">
                    <label class="left">水平移动: &nbsp;</label>
                    <div class="left"><input type="range" id="horizontal_move" min="-200" max="200" step="20" ng-change="rectChange('horizontal_move')" ng-model="$parent.horizontal_move"/></div>
                    <div class="left"><label> {{horizontal_move}}px</label></div>
                </div>
                <div class="form-group data_unit">
                    <label class="left">垂直移动: &nbsp;</label>
                    <div class="left"><input type="range" id="vertical_move" min="-200" max="200" step="20" ng-change="rectChange('vertical_move')" ng-model="$parent.vertical_move"/></div>
                    <div class="left"><label> {{vertical_move}}px</label></div>
                </div>
                <br/>
                <div class="form-group data_unit">
                    <label class="left">颜色: &nbsp;</label>
                    <div class="left"><input type="color" ng-change="rectChange('rect_color')" ng-model="$parent.rect_color"/></div>
                </div>
            </form>
        </div>
        <div class="col-md-2">&nbsp;</div>
    </div>
    <div class="left_bar col-xs-2" ng-controller="buttonCtrl">
        <div class="col-xs-6 pull-right" >
            <button ng-click="handEvent()" type="button" class="list-group-item"><span class="glyphicon glyphicon-hand-up" aria-hidden="true"></span></button>
            <button ng-click="brushEvent()" type="button" class="list-group-item"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;画笔</button>
            <button ng-click="rectangularEvent()" type="button" class="list-group-item"><span class="glyphicon glyphicon-stop" aria-hidden="true"></span>&nbsp;矩形</button>
            <button ng-click="circleEvent()" type="button" class="list-group-item"><span class="glyphicon glyphicon-record" aria-hidden="true"></span>&nbsp;圆</button>
            <button ng-click="wordEvent()" type="button" class="list-group-item" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-font" aria-hidden="true"></span>&nbsp;文字</button>
            <button ng-click="histogramEvent()" type="button" class="list-group-item" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span>&nbsp;直方图</button><br/>
            <button ng-click="undoEvent()" type="button" class="list-group-item"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span>&nbsp;撤销</button>
            <button ng-click="printEvent()" type="button" class="list-group-item"><span class="glyphicon glyphicon-print" aria-hidden="true"></span>&nbsp;导出</button>
        </div>
    </div>
    <div class="div_canvas col-xs-8 well" ng-controller="canvasCtrl" >
        <!--<canvas id="canvas1" width="950px" height="700px"
                ng-mouseover="over()"
                ng-mousedown="down()"
                ng-mousemove="mouseDrag()"
                ng-mouseup="up()"
                ng-mouseleave="mouseLeave()"
                class="canvas">
            你的浏览器不支持canvas</canvas>-->
        <div ng-repeat="level in $parent.levels">
            <!--<ac></ac>-->
            <canvas id="canvas{{level}}" width="950px" height="680px"
                    ng-mouseover="over()"
                    ng-mousedown="down()"
                    ng-mousemove="mouseDrag()"
                    ng-mouseup="up()"
                    ng-mouseleave="mouseLeave()"
                    class="canvas"
                    z-index="{{level+1}}"
            >
                你的浏览器不支持canvas</canvas>
        </div>
    </div>
    <div class="right_bar col-xs-2" ng-controller="imgCtrl">
        <form enctype="multipart/form-data">
            <h3>图片上传操作专区</h3><br/>
            <div class="form-group">
                <div class="form-group">
                    <input type="file" file-model="myFile" class="btn btn-success"/>
                    <img ng-src="{{imageSrc}}" style="max-width:300px;max-height:300px;margin:10px auto;display:block;" />
                    <input class="btn btn-info" value="确定" type="button"  ng-click="inputFile()"/>
                    <span>选好图片后,请点确定</span><br/><br/>
                    <!--<button ng-click="cutEvent()" type="button" class="btn btn-warning"><span class="glyphicon glyphicon-scissors" aria-hidden="true"></span>&nbsp;&nbsp;裁剪</button>-->
                </div>
                <br/>
                <div class="form-group">
                    <label >图片宽度: &nbsp;</label>
                    <div><input type="range" id="img_width" min="0" max="2" step="0.1" ng-model="img_width" ng-change="imgChange(1)"/></div>
                    <div><label>{{img_width}}倍</label></div>
                </div>
                <div class="form-group">
                    <label>图片高度: &nbsp;</label>
                    <div><input type="range" id="img_height" min="0" max="2" step="0.1" ng-model="img_height" ng-change="imgChange(1)"/></div>
                    <div><label>{{img_height}}倍</label></div>
                </div>
                <div class="btn-group" data-toggle="buttons" ng-model="vertex_center">
                    <label ng-click="rotateEvent(1)" ng-class="{true:'btn btn-primary active', false:'btn btn-primary'}[vertex_center]">
                        <input type="radio" name="options" id="rotate1" autocomplete="off" checked> 左顶点旋转
                    </label>
                    <label ng-click="rotateEvent(0)" ng-class="{true:'btn btn-primary', false:'btn btn-primary active'}[vertex_center]">
                        <input type="radio" name="options" id="rotate2" autocomplete="off"> 中心点旋转
                    </label>
                </div>
                <div style="margin: 10px;" ng-mouseup="rotateDown()">
                    <input type="text" class="dial" value="0" >
                    <input id="rotateValue" type="hidden" ng-model="rotateValue" />
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="z-index: 1000" data-backdrop="false" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content" ng-show="sign=='histogram'">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">直方图元素数据</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning" role="alert">
                        <strong> 请规范输入, 各轴元素及数据为必填项</strong>
                    </div>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">标题:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="title" placeholder="" ng-model="title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="desObj" class="col-sm-2 control-label">描述对象:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="desObj" placeholder="" ng-model="desObj">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="x-axis" class="col-sm-2 control-label">X轴元素:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="x-axis" placeholder="输入X轴的区间分段" ng-model="inputX">
                            </div>
                            <button id="x-add" type="submit" class="btn" ng-click="addX()">
                                <i class="glyphicon glyphicon-plus"></i>
                            </button>
                        </div>
                        <div class="row" id="x-element" style="overflow: hidden">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-9">
                                <button class="btn btn-primary btn-xs" ng-repeat="btn in xData" ng-click="delElement('x', btn, 1)">
                                    {{btn}}
                                    &nbsp;&nbsp;<i class="glyphicon glyphicon-remove"></i>
                                </button>
                            </div>
                        </div><br/>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">Y轴元素:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" ng-model="inputY.name" placeholder="输入量度指标">
                            </div>
                            <br/><br/><br/>
                            <div class="col-sm-2"></div>
                            <div class="col-sm-9 form-group">
                                <div class="col-sm-6">
                                    <div class="col-sm-7">
                                        <input type="text" class="form-control" ng-model="inputY.min">
                                    </div>
                                    <label class="col-sm-5 control-label">最小值</label>
                                </div>
                                <div class="col-sm-6">
                                    <div class="col-sm-7">
                                        <input type="text" class="form-control" ng-model="inputY.max">
                                    </div>
                                    <label class="col-sm-5 control-label">最大值</label>
                                </div>
                                <div class="col-sm-6">
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" ng-model="inputY.spacing">
                                    </div>
                                    <label class="col-sm-4 control-label">间距</label>
                                </div>
                                <div class="col-sm-6">
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" ng-model="inputY.unit">
                                    </div>
                                    <label class="col-sm-4 control-label">单位</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="data" class="col-sm-2 control-label">数据:</label>
                            <div class="col-sm-5">
                                <select class="form-control" ng-model="curX" ng-options="n for n in xData">
                                    <option value="">-- 请选择 --</option>
                                </select>
                            </div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="data" placeholder="每条柱子的数据" ng-model="inputData">
                            </div>
                            <button id="data-add" type="submit" class="btn" ng-click="add_data()">
                                <i class="glyphicon glyphicon-plus"></i>
                            </button>
                        </div>
                        <div class="row" id="dataList" style="overflow: hidden">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-9">
                                <button class="btn btn-primary btn-xs" ng-repeat="btn in x_inputData" ng-click="delElement('y', btn.x, btn.v)">
                                    {{btn.x}}_{{btn.v}}
                                    &nbsp;&nbsp;<i class="glyphicon glyphicon-remove"></i>
                                </button>
                            </div>
                        </div>
                    </form>

                    <div class="alert alert-danger alert-dismissible " role="alert" ng-show="error_alert">
                        <button type="button" class="close" aria-label="Close" ng-click="alertErr(null)">
                            <span aria-hidden="true">&times;</span></button>
                        <span id="error_str"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" ng-click="sure(1)">确认</button>
                </div>
            </div><!-- /.modal-content -->
            <div class="modal-content" ng-hide="sign=='histogram'">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">绘制文字</h4>
                </div>
                <div class="modal-body">
                    <div ueditor="editor" ng-required="true" ng-model="editWord" id="editor"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" ng-click="sure(2)">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
</body>

<script>
    $(document).ready(function(){
        $('.div_canvas').width($('.canvas').width());
        $('.div_canvas').height($('.canvas').height());
    });
</script>

</html>
